<template>
  <div>
    <!-- 头部 -->
    <el-card class="head-content">
      <span class="head-content-txt">文章管理</span>
      <i class="el-icon-arrow-right head-content-txt" />
      <span class="head-content-txt">草稿</span>
    </el-card>
    <!-- 表格 -->
    <el-card class="form-content">
      <el-form ref="form" :model="query" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.articleTitle" placeholder="请输入标题关键词" />
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="query.category"
            clearable
            placeholder="请选择分类"
            :props="cascaderProps"
            :options="categoryListData"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.label" clearable placeholder="请选择标签">
            <el-option
              v-for="label of labelDataList"
              :key="'label'+label.id"
              :label="label.labelName"
              :value="label.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.authorName" clearable placeholder="请选择作者">
            <el-option
              v-for="author of authorList"
              :key="author.id"
              :label="author.authorName"
              :value="author.authorName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.type" placeholder="请选择类型" clearable>
            <el-option v-for="(article,key) in articleType" :key="key" :label="article" :value="key" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="query.timeDate"
            type="daterange"
            :clearable="true"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData('init')">搜索</el-button>
          <el-button type="primary" @click="empty">重置</el-button>
          <el-button type="primary" :disabled="multipleSelection.length == 0" @click="showRoleDialog">批量修改可看范围</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" @selection-change="(val) => multipleSelection = val">
        <el-table-column
          type="selection"
        />
        <el-table-column prop="category" label="分类" align="center">
          <template slot-scope="scope">
            <span v-for="(category,idx) of scope.row.categoryList" :key="category.categoryNm">
              <span v-show="idx != 0">/</span>
              {{ category.categoryNm }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="articleTitle" label="标题" align="center" />
        <el-table-column prop="address" label="标签" align="center">
          <template slot-scope="scope">
            <el-tag
              v-for="label of scope.row.labelList"
              :key="label.labelId"
              type="success"
              size="small"
            >
              {{ label.labelNm }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="articleType" label="类型" align="center">
          <template slot-scope="scope">
            <span>{{ articleType[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authorName" label="作者" align="center" />
        <el-table-column prop="updateTm" label="保存时间" align="center">
          <template slot-scope="scope">
            <span>{{ dayjs(scope.row.updateTm).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderSn" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="menuHandle('edit',scope.row)">编辑</el-button>
            <el-button type="text" @click="menuHandle('put',scope.row)">上架</el-button>
            <el-button type="text" @click="menuHandle('detail',scope.row)">查看</el-button>
            <el-button type="text" @click="menuHandle('del',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">

        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 批量修改可看权限 -->
    <AllSelectRole v-model="allSelectRoleVis" :select-row="multipleSelection" @submit="saveAllRole" />
  </div>
</template>

<script>

import {
  articleInfoList,
  categoryInfoList,
  articleInfoPut,
  authorInfoList,
  labelInfoList,
  categoryInfoBatAuth,
  articleInfoDel } from '@/api/knowledge'
import dayjs from 'dayjs'
import AllSelectRole from './components/AllSelectRole.vue'
export default {
  components: {
    AllSelectRole
  },
  data() {
    return {
      allSelectRoleVis: false,
      multipleSelection: [],
      dayjs,
      cascaderProps: {
        label: 'categoryName',
        value: 'id',
        emitPath: false,
        checkStrictly: true
      },
      query: {
        articleTitle: '', // 关键词
        category: '', // 请选择分类
        label: '', // 请选择标签
        authorName: '', // 请选择作者
        type: '', // 请选择类型
        status: 'W',
        timeDate: [
          // dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
          // dayjs().format('YYYY-MM-DD')
        ] // 日期
      },
      articleType: {
        M: '图文',
        P: '图片',
        R: '视频'
      },
      tableData: [],
      categoryListData: [],
      authorList: [],
      labelDataList: [],
      // 分页对象
      page: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getBasedata()
    this.fetchData()
  },
  methods: {
    showRoleDialog() {
      if (this.multipleSelection.length > 0) {
        this.allSelectRoleVis = true
      } else {
        this.$message.error('至少选择一条数据')
      }
    },
    saveAllRole(data) {
      console.log('saveAllRole', data)
      const obj = {
        ids: this.multipleSelection.map(v => v.id).toString(),
        roleNm: data.roleNm.join(','),
        agtList: data.agtListObj
      }
      console.log('saveAllRole', data, this.multipleSelection)
      console.log('obj', obj)
      categoryInfoBatAuth(obj).then(res => {
        this.$message.success('修改成功')
        this.allSelectRoleVis = false
        this.fetchData()
      })
    },
    getBasedata() {
      categoryInfoList().then(res => {
        this.categoryListData = this.resetData(res.data)
      })
      authorInfoList({
        pageSize: 999,
        currentPage: 1
      }).then(res => {
        this.authorList = res.data.list
      })
      labelInfoList({
        pageSize: 999,
        currentPage: 1
      }).then(res => {
        this.labelDataList = res.data.list
      })
    },
    resetData(arr) {
      return arr.map(item => {
        return {
          ...item,
          children: item.children.length ? this.resetData(item.children) : null
        }
      })
    },
    menuHandle(type, data) {
      switch (type) {
        case 'detail':
          // 查看文章
          this.$router.push({
            name: 'NewArticle',
            query: {
              backPage: 'Draft',
              articleId: data.id,
              type
            }
          })
          break
        case 'put':
          this.$confirm('是否确定上架当前文章', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            articleInfoPut({
              id: data.id,
              status: 'Y'
            }).then(res => {
              this.$router.push({
                name: 'Article'
              })
            })
          })
          break
        case 'edit':
          // 编辑
          this.$router.push({
            name: 'NewArticle',
            query: {
              backPage: 'Draft',
              articleId: data.id,
              type
            }
          })
          break
        case 'del':
          this.$confirm('是否删除当前文章？删除后将不可找回', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            articleInfoDel({ id: data.id }).then(res => {
              this.$message.success('操作成功')
              this.fetchData('init')
            })
          })
          break
      }
    },
    // 统计
    Statistics() {
      this.dialogFormVisible = true
    },
    // 草稿
    Draft() {
      this.$router.push({ name: 'Draft' })
    },
    // 新增文章
    NewArticle() {
      // this.$router.push({name:"OrderInfo",params:{id}})
      this.$router.push({ name: 'NewArticle', query: { backPage: 'Draft' } })
    },
    // 重置
    empty() {
      this.query = this.$options.data().query
    },
    fetchData(type) {
      console.log('submit!', this.query)
      if (type == 'init') {
        this.page.currentPage = 1
      }
      const obj = {
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage,
        ...this.query,
        beginDate: this.query.timeDate && this.query.timeDate.length ? this.query.timeDate[0] : '2021-01-01',
        endDate: this.query.timeDate && this.query.timeDate.length ? this.query.timeDate[1] : dayjs().format('YYYY-MM-DD')
      }
      delete obj.timeDate

      articleInfoList(obj).then(res => {
        console.log('articleInfoList', res)
        const { list, total } = res.data
        this.tableData = res.data.list.map(item => {
          return {
            ...item,
            labelList: item.labelList ? JSON.parse(item.labelList) : [],
            categoryList: item.categoryList ? JSON.parse(item.categoryList) : []
          }
        })
        this.page.total = total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
    .head-content {
    width: 100%;

    .head-content-txt {
      font-size: 24px;
      font-weight: 550;
    }
  }

  .form-content {
    margin-top: 10px;

    .upperFrame {
      width: 100%;
      border-bottom: 1px solid #000000;
      padding-bottom: 20px;

      .upperFrame-txt {
        margin-right: 20px;

      }

    }
  }
  .StatisticsBox{
    display: flex;
    justify-content:space-around;
    .StatisticsBoxItem{
      display: flex;
      flex-direction: column;
      align-items: center;
      .StatisticsBoxItem-txt{
        margin-top: 10px;
      }
    }
  }
</style>
